<template>

  <div>
    <div class="login-container">
      <div style="width: 500px" class="login-box">
        <div style="font-weight: bold;font-size: 24px;text-align: center; margin-bottom: 30px">注册</div>
        <el-form ref="formRef" :model="data.form" :rules="rules" >
          <el-form-item label="公司名称" prop="username">
            <el-input  v-model="data.form.username" placeholder="请输入公司账号"/>
          </el-form-item>
          <el-form-item label="设置密码" prop="password">
            <el-input  v-model="data.form.password" placeholder="请输入公司密码"/>
          </el-form-item>
          <el-form-item label="个人名称" prop="name">
            <el-input  v-model="data.form.name" placeholder="请输入公司名称"/>
          </el-form-item>
          <el-form-item label="公司邮箱" prop="email">
            <el-input  v-model="data.form.email" placeholder="请输入公司邮箱"/>
          </el-form-item>
          <el-form-item prop="sex"  label="个人性别选择">
            <el-select style="width:100%" v-model="data.form.sex">
              <el-option label="男生" value="boy">男生</el-option>
              <el-option label="女生" value="girl">女生</el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="role"  label="个人用户选择">
            <el-select style="width:100%" v-model="data.form.role">
              <el-option label="客户" value="Student">客户</el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="手机号" prop="phone">
            <el-input  v-model="data.form.phone" placeholder="请输入手机号"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="register">注册</el-button>
          </el-form-item>

        </el-form>
        <div style="margin-top: 30px;text-align: right">已有账号？请<a href="/login">登入</a></div>
      </div>
    </div>
  </div>
</template>

<script setup>

import {reactive,ref} from "vue";
import request from "@/utils/request.js";

import {ElMessage} from "element-plus";

const data = reactive({
  form:{
    role:'Student',
    sex:'boy',
    birth:'2002-10-1',
    avatar:'',


  }

})



const register =()=>{
  console.log(data.form.username)

  if (data.form.username==null | data.form.password==null | data.form.name==null | data.form.email==null | data.form.phone==null){
    ElMessage.error("输入不能为空")
  }else{
    request.post('/register',data.form).then(res=>{
      console.log(res.data.code)
      if (res.data.code===1){
        localStorage.setItem('student-user',JSON.stringify(res.data))
        ElMessage.success('注册成功')

        window.setTimeout(function () {
          location.href='/Course'
        },2000)
        //延迟两秒
        //跳转到主页



      }else if(res.data.code===20001){
        ElMessage.error('用户名已存在')

      }else{
        ElMessage.error('注册未知失败')

      }

    })
  }


}
//表单校验？

</script>

<style scoped>
.login-container{
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("@/assets/img/back1.png");
  background-size: cover;


}
.login-box{

  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border: 1px solid #ddd;
  padding: 80px;
  border-radius: 25px;

}
</style>
